<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偷得浮生半日闲👍</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 5px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 

.leftcolumn {   
  float: left;
  width: 75%;
}
 
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
    padding:5px;
  width: 100%;
 height: 250px;
}
    .fakeimg1 {
  background-color: #aaa;
    padding:5px;
  width: 100%;
 height: auto;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
    .bookborder{
        border:2px auto;
    }
</style>
</head>
<body>
    <script type="text/javascript" src="me.js" ></script>
<div class="header">
  <h1>偷得浮生半日闲🎐</h1>
  <p><strong>find a moment of leisure in a busy life</strong></p>
</div>

<div class="topnav">
  <a href="#">📕文学</a>
  <a href="#">音乐🎵</a>
  <a href="#">电影🎦</a>
  <a href="#" style="float:right">动漫😋</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>读的书</h2>
      <h5>2019 年 6 月 22日</h5>
      <div class="fakeimg" style="text-align: center"><img src="photo/s3349943.jpg" height="65%">
          <img src="photo/4ec2d5628535e5dd720b780e7dc6a7efce1b6238.jpg" height="92%">
        <img src="photo/s1326174.jpg" height="80%">
        <img src="photo/s6384944.jpg"  height="100%">
        <img src="photo/s27598249.jpg" height="90%">
          <img src="photo/s27227804.jpg"height="80%">
        </div>
      <p><strong>人不过是一颗会思考的蒲苇,少些聒噪，不如安静享受人生。</strong></p>
    
    </div>
    <div class="card">
      <h2>看的电影</h2>
      <h5>2019 年 6月 22日</h5>
      <div class="fakeimg" style="height:400px;text-align: center">
            <img src="photo/091239.28821393_1000X1000.jpg" height="100%">
            <img src="photo/113845.39930557_1000X1000.jpg" height="80%">
          <img src="photo/170933.80329367_1000X1000.jpg"height="88%">
          <img src="photo/144459.67092113_1000X1000.jpg" height="80%">
      </div>
      <p>觉得还不错</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>误入の二次元</h2>
         <h5>2019 年 6 月 22日</h5>
        <div class="fakeimg1"><img src="photo/9213b07eca806538da1a0e4b784ca541ac348209.jpeg" width="100%"height="100%"></div>
      <p>银魂完结，不留遗憾</p>
    </div>
    <div class="card">
      <h3>一拳超人</h3>
        <h5>2019 年 6 月 22日</h5>
      <div class="fakeimg1"><img src="photo/u=1776537392,2847643283&fm=173&app=49&f=JPEG.jpg"width="100%"></div>
        <p>有意志消沉的功夫,还是选择继续前进比较好</p>
    </div>
  
  </div>
</div>

<div class="footer">
  <h2>纪录一下消遣的生活 🍀</h2>
</div>

</body>
</html>